<template>
    <div class="flex-fill">

        <div class="account-list rounded">
            <div class="account-item">
                <div class="d-flex align-center title">
                    <i-icon class="mr-2" icon="mdi-account" size="18px"/>
                    <div>账号</div>
                </div>

                <div class="account">
                    <el-link @click="onCopy(account?.authAccount)">
                        {{ account?.authAccount }}
                        <el-icon class="el-icon--right">
                            <CopyDocument/>
                        </el-icon>
                    </el-link>
                </div>

<!--                <div class="d-flex align-center enabled">-->
<!--                    <el-icon class="mr-1">-->
<!--                        <SuccessFilled v-if="account?.enabled" color="#409eff"/>-->
<!--                        <CircleCloseFilled v-else color="#f56c6c"/>-->
<!--                    </el-icon>-->
<!--                    <el-text v-if="account?.enabled">账号可用</el-text>-->
<!--                    <el-text v-else>账号不可用</el-text>-->
<!--                </div>-->

<!--                <div class="d-flex align-center accountNonExpired">-->
<!--                    <el-icon class="mr-1">-->
<!--                        <SuccessFilled v-if="account?.accountNonExpired" color="#409eff"/>-->
<!--                        <CircleCloseFilled v-else color="#f56c6c"/>-->
<!--                    </el-icon>-->
<!--                    <el-text v-if="account?.accountNonExpired">账号未过期</el-text>-->
<!--                    <el-text v-else>账号过期</el-text>-->
<!--                </div>-->

                <div class="action">
                    <el-space>
                        <el-button
                                size="small"
                                text
                                type="primary"
                                @click="bindApi.onShowChangePassword(account?.id)">
                            修改密码
                        </el-button>
                    </el-space>
                </div>
            </div>
            <el-divider class="ma-0"/>
            <div class="account-item">
                <div class="d-flex align-center title">
                    <i-icon class="mr-2" icon="mdi-cellphone" size="18px"/>
                    <div>手机号</div>
                </div>

                <div class="account">
                    <el-link v-if="phone" @click="onCopy(phone?.authAccount)">
                        {{ phone?.authAccount }}
                        <el-icon class="el-icon--right">
                            <CopyDocument/>
                        </el-icon>
                    </el-link>
                    <div v-else class="d-flex align-center justify-center">
                        <el-icon class="mr-1">
                            <CircleCloseFilled color="#f56c6c"/>
                        </el-icon>
                        <el-text>未绑定</el-text>
                    </div>
                </div>

<!--                <div class="d-flex align-center enabled">-->
<!--                    <div v-if="phone" class="d-flex align-center">-->
<!--                        <el-icon class="mr-1">-->
<!--                            <SuccessFilled v-if="phone?.enabled" color="#409eff"/>-->
<!--                            <CircleCloseFilled v-else color="#f56c6c"/>-->
<!--                        </el-icon>-->
<!--                        <el-text v-if="phone?.accountNonExpired">账号可用</el-text>-->
<!--                        <el-text v-else>账号不可用</el-text>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="d-flex align-center accountNonExpired">-->
<!--                    <div v-if="phone" class="d-flex align-center">-->
<!--                        <el-icon class="mr-1">-->
<!--                            <SuccessFilled v-if="phone?.accountNonExpired" color="#409eff"/>-->
<!--                            <CircleCloseFilled v-else color="#f56c6c"/>-->
<!--                        </el-icon>-->
<!--                        <el-text v-if="phone?.accountNonExpired">账号未过期</el-text>-->
<!--                        <el-text v-else>账号过期</el-text>-->
<!--                    </div>-->
<!--                </div>-->

                <div class="action">
                    <el-space v-if="phone">
                        <el-button size="small" text type="danger" @click="onUnBind(phone?.id)">解除绑定</el-button>
                    </el-space>
                    <el-button
                            v-else
                            size="small"
                            text
                            type="primary"
                            @click="bindApi.onShowBindPhone(<string>userApi?.detailState?.form.id)"
                    >
                        绑定手机号
                    </el-button>
                </div>

            </div>
            <el-divider class="ma-0"/>
            <div class="account-item">
                <div class="d-flex align-center title">
                    <i-icon class="mr-2" icon="mdi-email" size="18px"/>
                    <div>邮箱</div>
                </div>

                <div class="account">
                    <el-link v-if="email" @click="onCopy(email?.authAccount)">
                        {{ email?.authAccount }}
                        <el-icon class="el-icon--right">
                            <CopyDocument/>
                        </el-icon>
                    </el-link>
                    <div v-else class="d-flex align-center justify-center">
                        <el-icon class="mr-1">
                            <CircleCloseFilled color="#f56c6c"/>
                        </el-icon>
                        <el-text>未绑定</el-text>
                    </div>
                </div>

<!--                <div class="d-flex align-center enabled">-->
<!--                    <div v-if="email" class="d-flex align-center">-->
<!--                        <el-icon class="mr-1">-->
<!--                            <SuccessFilled v-if="email?.enabled" color="#409eff"/>-->
<!--                            <CircleCloseFilled v-else color="#f56c6c"/>-->
<!--                        </el-icon>-->
<!--                        <el-text v-if="email?.accountNonExpired">账号可用</el-text>-->
<!--                        <el-text v-else>账号不可用</el-text>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="d-flex align-center accountNonExpired">-->
<!--                    <div v-if="email" class="d-flex align-center">-->
<!--                        <el-icon class="mr-1">-->
<!--                            <SuccessFilled v-if="email?.accountNonExpired" color="#409eff"/>-->
<!--                            <CircleCloseFilled v-else color="#f56c6c"/>-->
<!--                        </el-icon>-->
<!--                        <el-text v-if="email?.accountNonExpired">账号未过期</el-text>-->
<!--                        <el-text v-else>账号过期</el-text>-->
<!--                    </div>-->
<!--                </div>-->

                <div class="action">
                    <el-space v-if="email">
                        <el-button size="small" text type="danger" @click="onUnBind(email?.id)">解除绑定</el-button>
                    </el-space>
                    <el-button
                            v-else
                            size="small"
                            text
                            type="primary"
                            @click="bindApi.onShowBindEmail(<string>userApi?.detailState?.form.id)"
                    >
                        绑定邮箱
                    </el-button>
                </div>
            </div>
        </div>

        <ChangePassword :bind-api="bindApi" :user-api="userApi"/>
        <BindPhone :bind-api="bindApi" @afterBind="onAfterBind"/>
        <BindEmail :bind-api="bindApi" @afterBind="onAfterBind"/>
    </div>
</template>

<script lang="ts" setup>
import {UserApi} from "~/api/system/user";
import {AccountApi} from "~/api/system/account";
import {computed, onMounted, reactive, watch} from "vue";
import {CommonApi} from "~/api/system/common.api";
import {CircleCloseFilled, CopyDocument, SuccessFilled} from "@element-plus/icons-vue";
import {useClipboard} from "@vueuse/core";
import {ElMessage} from "element-plus";
import ChangePassword from "~/views/system/user/dialog/ChangePassword.vue";
import {BindApi} from "~/api/system/account/bind.api";
import BindPhone from "~/views/system/user/dialog/BindPhone.vue";
import BindEmail from "~/views/system/user/dialog/BindEmail.vue";

interface Props {
    userApi: UserApi;
}

const {copy} = useClipboard();
const {userApi} = withDefaults(defineProps<Props>(), {});
const api = new AccountApi();
const bindApi = new BindApi();
const authTypeList = reactive({
    data: [],
});
const commonApi = new CommonApi();

function onUnBind(id: string) {
    api.onDelete(id, "警告！", "您确定要解除绑定吗？", {
        confirmButtonText: "解除",
        cancelButtonText: "取消",
        type: "error",
    }, false).then(() => {
        api.queryByUserId(<string>userApi.detailState.form.id);
    });
}

const account = computed(() => {
    return (api.userAccountState.data as any[]).find(item => item.authType === "ACCOUNT");
});

const phone = computed(() => {
    return (api.userAccountState.data as any[]).find(item => item.authType === "PHONE");
});

const email = computed(() => {
    return (api.userAccountState.data as any[]).find(item => item.authType === "EMAIL");
});

function onCopy(e: string) {
    copy(e).then(res => {
        ElMessage.success("复制完成");
    });
}

function onAfterBind(ok: boolean) {
    if (ok) {
        api.queryByUserId(<string>userApi.detailState.form.id);
    }
}

watch(() => api.userAccountState.visible, value => {
    if (value) {
        commonApi.attachMore([{
            target: "AUTH_TYPE",
        }]).then(res => {
            if (res.ok && res.data) {
                authTypeList.data = res.data[`authTypeOptions`];
            }
        });
    }
});


onMounted(() => {
    api.queryByUserId(<string>userApi.detailState.form.id);
});
</script>

<style lang="scss" scoped>
.account-list {
  border: var(--el-border);

  .account-item {
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-between;

    .title {
      width: 100px;
    }

    .account {
      text-align: center;
      width: 240px;
    }

    .enabled {
      text-align: center;
      width: 100px;
    }

    .accountNonExpired {
      text-align: center;
      width: 100px;
    }

    .action {
      text-align: center;
      width: 200px;
    }
  }
}
</style>
